<template>
  <div id="app" v-if="ifshow">
    <!--    顶部导航栏-->
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">公告</el-menu-item>
      <el-submenu index="2">
        <template slot="title">任务</template>
        <el-menu-item index="2-1" @click="ToTaskList">任务列表</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">
        <el-input placeholder="搜任务" >
          <el-button slot="append" icon="el-icon-search" ></el-button>
        </el-input>
      </el-menu-item>
      <el-menu-item index="4">
        <el-button type="grey" icon="el-icon-message" circle></el-button>
      </el-menu-item>
      <el-submenu index="5">
        <template slot="title">个人中心</template>
        <el-menu-item index="5-1" @click="ToHistory">历史记录</el-menu-item>
        <el-menu-item index="5-2" @click="ToInformation">设置信息</el-menu-item>
        <el-menu-item index="5-3" @click="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import Information from './Information'
import History from './History'
import router from '../../router'
import TaskList from './TaskList'
export default {
  name: 'AppIndex',
  components: {
    Information,
    History,
    TaskList
  },
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      ifshow: true
      // Tasks: [{data: '', id: 0, publisherName: '', reward: 0, tag_id: '', title: ''}]
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    ToTaskList () {
      router.push(({path: '/TaskList'}))
    },
    ToInformation () {
      router.push({path: '/Information'})
    },
    ToHistory () {
      router.push({path: '/History'})
    },
    logout () {
      this.$axios.get('/user/logout')
        .then(res => {
          if (res.data.status === 100) { // 100可换\
            console.log(res.data)
            // 删除localStrage
            localStorage.removeItem('token')
            alert(res.data.data)
            router.replace('/login')
          }
        }).catch(err => {
          console.log(err)
          this.$router.replace('/login')
        })
    }
  }
}
var Ctor = Vue.extend()
new Ctor().$mount('#app')
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
</style>
